<template>
  <div>
    <div class="login-cover">
      <div class="login-cover-image"></div>
    </div>
    <el-row type="flex" justify="center">
      <el-col :span="6"></el-col>
      <el-col :span="12">
          <div class="login-v2">
            <div class="login-right">
              <div class="login-content">
                <div class="login-content-top">账号登录</div>
                <el-form ref="form" :model="form" label-width="80px">
                  <el-row class="login-input" :gutter="20">
                    <el-col :span="24">
                      <el-input
                        v-model="form.name"
                        class="login-input-text"
                        placeholder="账号"
                        suffix-icon="el-icon-user-solid"
                      ></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="login-input" :gutter="20">
                    <el-col :span="24">
                      <el-input
                        type="password"
                        v-model="form.codeword"
                        class="login-input-text"
                        placeholder="密码"
                        suffix-icon="el-icon-lock"
                      ></el-input>
                    </el-col>
                  </el-row>
                  <el-row class="login-input" :gutter="20">
                    <el-col :span="24">
                      <el-checkbox
                        v-model="form.rememberme"
                        style="color: #606266;"
                      >记住我</el-checkbox>
                    </el-col>
                  </el-row>
                  <el-row class="login-input" :gutter="20">
                    <el-col :span="24">
                      <el-button
                        type="primary"
                        id="btnSubmitLogin"
                        style="width:100%;"
                        @click="submitLogin(form)"
                      >登录</el-button>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
  </div>
</template>

<style>
/*  */
.login-cover,
.login-cover-image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: background 0.2s linear;
}
.login-cover-image {
  background-image: url("../../../assets/img/login.jpg");
}
.login-cover-image img {
  max-width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

/* .login.login-v2 */
.login-v2 {
  margin-top:20%;
  display: flex;
  flex-direction: row;
  flex-wrap: none;
  justify-content: center;
  align-items: center;
}
.login-v2 .login-right {
  height: 380px;
  width: 375px;
  background-color: #f9f9f9;
  border-radius: 5px;
}
/* .login-right .login-content */
.login-v2 .login-content {
  padding: 20px;
  width: 335px;
  height: 255px;
  color: #999;
  margin: 0 auto;
}
.login-v2 .login-content .login-content-top{
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.login-content .login-input {
  margin-bottom: 25px;
}
.login-input-text input {
  border: 1px solid #afacac;
}

</style>


<script>
    import login from '../js/login.js'
    export default login
</script>

<!-- ::-ms-clear 是文本清除按钮，也就是input右方的叉叉 ::-ms-reveal是密码查看按钮，也就密码框右边的小眼睛-->
<style>    
.password-clear ::-ms-clear,::-ms-reveal{display:none;}
</style>